let index = 0;

function clickRight() {
    index = index + 1
    if (index > 5) {
        index = 0
    }
    change(index)
}

function clickLeft() {
    index = index - 1
    if (index < 0) {
        index = 5
    }
    change(index)
}

function change(index) {
    $('.banner div').eq(index).fadeIn().siblings().fadeOut()
    $('.dotIcon li').eq(index).addClass('active').siblings().removeClass('active')
}
let time = setInterval(clickRight, 2000)
$('.banner').on('mouseenter', function() {
    clearInterval(time)
})
$('.banner').on('mouseleave', function() {
    time = setInterval(clickRight, 2000)
})
$('.dotIcon li').on('click', function() {
    index = $(this).index()
    change($(this).index())
})